<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

	<link rel="stylesheet" type="text/css" href="../resources/cola-ui/semantic.css">
	<link rel="stylesheet" type="text/css" href="../resources/cola-ui/cola.css">
	<link rel="stylesheet" type="text/css" href="../resources/demo.css">
	<title>Button</title>
	<script src="../resources/jquery-2.1.3.js"></script>
	<script src="../resources/cola-ui/3rd.js"></script>
	<script src="../resources/cola-ui/semantic.js"></script>
	<script src="../resources/cola-ui/cola.js"></script>
	<script src="../resources/cola-ui/i18n/zh/cola.js"></script>

	<script type="text/javascript">
		cola(function (model) {
			cola.defineWidget({
				tagName: "field",
				attributes: {
					label: null,
					action: null
				},
				show: function() {
					var inputDom = this.get$Dom().find("c-input")[0];
					alert(cola.widget(inputDom).get("value"));
				},
				template: "#fieldTemplate"
			});
		});
	</script>
</head>
<body style="padding: 1em">
	<template id="fieldTemplate">
		<div>
			<c-input>
				<c-label c-bind='@label'></c-label>
				<c-button c-caption='@action' c-onclick='show()'></c-button>
			</c-input>
		</div>
	</template>

	<field c-label="name" action="检查"></field>

	<hr>

	<c-input bind="name"></c-input>
	<c-button icon="home">Caption</c-button>
</body>
</html>
